<template>
	<view :class="[sendBtnShow?'my-gift-detail my-gift-detail1':'my-gift-detail']">
		<view class="" v-if="isCompany">
			<view class="goods-main-img" v-if="type<2">
				<view class="main-img-wp flex_center">
					<image mode="widthFix" class="main-img" :src="orderInfo.image||''">
					</image>
				</view>
				<view class="goods-info">
					<view class="title">
						{{orderInfo.name||''}}
					</view>
					<view class="price-wp" v-if="orderInfo.price">
						￥{{orderInfo.price||''}}<text>/{{orderInfo.units?'/'+orderInfo.units:''}}</text>
					</view>
				</view>
			</view>
			<view class="goods-main-img" v-else>
				<view class="main-img-wp flex_center">
					<image mode="widthFix" class="main-img" :src="orderInfo.pic||''">
					</image>
				</view>
				<view class="goods-info">
					<view class="title">
						{{orderInfo.prodName||''}}
					</view>
					<view class="price-wp" v-if="orderInfo.price">
						￥{{orderInfo.price||''}}<text>/{{orderInfo.units?'/'+orderInfo.units:''}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- v-if="!isCompany" -->
		<view class="" v-if="!isCompany">
			<view class=" goods-main-img" v-if="type<3">
				<couponItem v-if="current==1" :model="orderInfo"></couponItem>
				<view v-else class="main-img-wp flex_center">
					<image mode="widthFix" class="main-img" :src="orderInfo.image||''">
					</image>
				</view>
				<view class="goods-info">
					<view class="title">
						{{orderInfo.name||''}}
					</view>
					<view class="price-wp" v-if="orderInfo.price">
						￥{{orderInfo.price||''}}<text>{{orderInfo.units?'/'+orderInfo.units:''}}</text>
					</view>
				</view>
			</view>
			<view class="goods-main-img" v-else>
				<view class="main-img-wp flex_center">
					<image mode="widthFix" class="main-img" :src="orderInfo.pic||''">
					</image>
				</view>
				<view class="goods-info">
					<view class="title">
						{{orderInfo.prodName||''}}
					</view>
					<view class="price-wp" v-if="orderInfo.price">
						￥{{orderInfo.price||''}}<text>{{orderInfo.units?'/'+orderInfo.units:''}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- v-if="orderInfo.takePeople" -->
		<view class="receiving-information" v-if="(type==2&&current==1) || orderInfo.infoTime">
			<view class="item flex_between_center" v-if="type==2&&current==1">
				<view class="title1">
					赠送人
				</view>
				<view class="title2">
					{{orderInfo.openName||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="type==2&&current==1">
				<view class="title1">
					赠送时间
				</view>
				<view class="title2">
					{{orderInfo.createTime||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="type==1&&current==1">
				<view class="title1">
					领取人
				</view>
				<view class="title2">
					{{orderInfo.userName||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="type==1&&current==1">
				<view class="title1">
					领取时间
				</view>
				<view class="title2">
					{{orderInfo.updateTime||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.infoTime">
				<view class="title1">
					兑换时间
				</view>
				<view class="title2">
					{{orderInfo.infoTime||''}}
				</view>
			</view>
		</view>

		<view class="receiving-information">
			<view class="btn-box flex_end_center" v-if="copyShow">
				<u-button text="复制发货地址" type="info" shape="circle" plain
					:customStyle="{width:'250rpx',height:'60rpx',margin:'0rpx'}" @tap="copyInfo"></u-button>
			</view>

			<view class="item flex_between_center" v-if="orderInfo.takePeople">
				<view class="title1">
					收货人
				</view>
				<view class="title2">
					{{orderInfo.takePeople||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.mobile">
				<view class="title1">
					联系电话
				</view>
				<view class="title2">
					{{orderInfo.mobile||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.address">
				<view class="title1">
					收货地址
				</view>
				<view class="title2 ">
					{{orderInfo.address||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.deliveryTime">
				<view class="title1">
					配送时间
				</view>
				<view class="title2">
					{{orderInfo.deliveryTime||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.remark">
				<view class="title1">
					备注
				</view>
				<view class="title2">
					{{orderInfo.remark||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.processTime">
				<view class="title1">
					处理时间
				</view>
				<view class="title2">
					{{orderInfo.processTime||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.conversionTime">
				<view class="title1">
					完成时间
				</view>
				<view class="title2">
					{{orderInfo.conversionTime||''}}
				</view>
			</view>
			<view class="item flex_between_center" v-if="orderInfo.payProof">
				<view class="title1">
					支付凭证截图
				</view>
				<view class="title2">
					<u-image :src="orderInfo.payProof" width="218rpx" height="218rpx" mode="widthFix"
						@tap="previewImage"></u-image>
				</view>
			</view>
		</view>
		<!-- <view class="nodata" v-else>
			好友尚未填写收货信息
		</view> -->
		<view class="good-list" v-if="dataList.length>0">
			<view class="right-item" v-for="(item, index) in dataList" :key="index">
				<view class="t-top">
					<img :src="item.pic" alt="" />
					<view class="t-info">
						<view class="t-title">
							{{ item.prodName }}
						</view>
						<view class="t-money">
							<view class="t-money-lt" v-if="item.price">
								￥{{ item.price }}<text>/{{item.units||''}}</text>
							</view>
							<view class="t-money-rt">
								x{{ item.totalStocks }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-box1" v-if="sendBtnShow">
			<u-button v-if="current==0" @click="sendGoods" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">发货</u-button>
			<u-button v-if="current==0||current==1" @click="sendGoodsFinish" type="success" :custom-style="{
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">订单完成</u-button>

		</view>
		<u-modal :show="confirmSendShow" title="确认发货" :show-cancel-button="true" @cancel="confirmSendShow=false"
			@confirm="confirmSend">
			<view class="slot-content">
				请确认已进行线下发货
			</view>
		</u-modal>
		<u-modal :show="confirmSendFinishShow" title="确认订单完成" :show-cancel-button="true"
			@cancel="confirmSendFinishShow=false" @confirm="confirmSendFinish">
			<view class="slot-content">
				请确认已完成订单
			</view>
		</u-modal>
	</view>
</template>

<script>
	import couponItem from '@/pagesMall/components/couponItem/couponItem.vue'
	import {
		mapGetters
	} from 'vuex'
	import commonJS from '@/common/libs/common.js'

	export default {
		components: {
			couponItem
		},
		data() {
			return {
				orderInfo: {},
				type: '', //左侧点击
				current: '', //右侧点击
				gooodsDetailImg: [],
				//右侧数据
				dataList: [], //界面显示tab的数据
				copyShow: false, //一键复制是否可见
				sendBtnShow: false, //发货是否可见
				confirmSendShow: false, //是否确认发货
				confirmSendFinishShow: false, //是否确认订单完成
				isCompany: false,

			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.type = Number(opt.type)
				console.log("=================>")
				console.log(this.type)
				console.log(typeof(this.type))
				this.current = opt.current
				this.isCompany = JSON.parse(opt.isCompany)
				console.log(this.isCompany)
				console.log(typeof(this.isCompany))
				// debugger
				switch (this.type) {
					case 1:
						// 我的赠送
						this.copyShow = true
						if (this.current == 0) {
							uni.setNavigationBarTitle({
								title: '商品详情'
							});
							this.getOrderInfo(opt.id)
						} else if (this.current == 1) {
							uni.setNavigationBarTitle({
								title: '代金券'
							});
							this.copyShow = false
							this.getOrderInfo3(opt.id)
						} else {

							uni.setNavigationBarTitle({
								title: '大礼包详情'
							});
							this.getOrderInfo(opt.id)
						}


						break;
					case 2:
						if (this.isCompany) {
							console.log("企业的跳转")
							this.sendBtnShow = true
							uni.setNavigationBarTitle({
								title: '售出详情'
							});
							this.getOrderInfo2(opt.id)
						} else {
							// 我的领取
							this.copyShow = false
							if (this.current == 0) {
								uni.setNavigationBarTitle({
									title: '商品详情'
								});
								this.getOrderInfo(opt.id)
							} else if (this.current == 1) {
								uni.setNavigationBarTitle({
									title: '代金券'
								});
								this.getOrderInfo3(opt.id)
							} else {
								uni.setNavigationBarTitle({
									title: '大礼包详情'
								});
								this.getOrderInfo(opt.id)
							}

						}


						break;
					case 3:

						// 我的售出
						this.copyShow = true
						if (this.current <= 1) {
							// 待发货
							this.sendBtnShow = true
						} else {
							this.sendBtnShow = false
						}
						uni.setNavigationBarTitle({
							title: '售出详情'
						});
						this.getOrderInfo2(opt.id)

						break;
					case 4:
						//  我的购买
						this.copyShow = false
						uni.setNavigationBarTitle({
							title: '购买详情'
						});
						this.getOrderInfo2(opt.id)
						break;
					default:
						this.copyShow = false
						break;
				}

			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			previewImage() {
				commonJS.previewImage([this.orderInfo.payProof])
			},
			// 我的赠送 和 我的领取大礼包详情
			async getOrderInfo(id) {
				let res = await this.$api.getMsGiftCodeById({
					id
				})
				if (res.success) {
					console.log(res.result);
					this.orderInfo = res.result
					this.dataList = []
					if (res.result.msGiftProdVOList.length > 0) {
						this.dataList = res.result.msGiftProdVOList
					}

				} else {
					this.orderInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					uni.navigateBack()
				}
			},
			// 我的赠送 和 我的领取 代金券详情
			async getOrderInfo3(id) {
				console.log(id, 'id');
				let res = await this.$api.queryMsVoucherCodeById({
					id
				})
				if (res.success) {
					console.log(res.result);
					this.orderInfo = res.result
					this.dataList = []
					// if (res.result.msGiftProdVOList.length > 0) {
					// 	this.dataList = res.result.msGiftProdVOList
					// }

				} else {
					this.orderInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					uni.navigateBack()
				}
			},



			// 我的售出 和 我的购买详情
			async getOrderInfo2(id) {
				let res = await this.$api.getMsVoucherById({
					id
				})
				if (res.success) {
					console.log(res.result);
					this.orderInfo = res.result
				} else {
					this.orderInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					setTimeout(() => {

						uni.navigateBack()
					}, 1000)

				}
			},
			copyInfo() {
				if (this.orderInfo) {
					let data =
						`收货人:${this.orderInfo.takePeople?this.orderInfo.takePeople:''},收货地址:${this.orderInfo.address?this.orderInfo.address:''},联系电话:${this.orderInfo.mobile?this.orderInfo.mobile:''}`
					uni.setClipboardData({
						data,
						fail: () => {
							uni.showToast({
								title: '复制出错',
								icon: 'none'
							})
						}

					});

				} else {
					uni.showToast({
						icon: '好友尚未填写收货信息',
						title: res.message
					})
				}

			},
			// 是否发货
			sendGoods() {
				this.confirmSendShow = true
			},
			// 是否订单完成
			sendGoodsFinish() {
				this.confirmSendFinishShow = true
			},
			// 确认发货
			confirmSend() {

				console.log(this.orderInfo)
				// let {
				// 	openId
				// } = this.userInfo
				let {
					openId
				} = uni.getStorageSync('openId')
				let data = {
					id: this.orderInfo.id,
					openId: openId
				}
				this.$api.addDelivery(data).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						this.confirmSendShow = false
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
					}

				})
			},
			// 确认订单完成
			confirmSendFinish() {
				console.log(this.orderInfo)
				// let {
				// 	openId
				// } = this.userInfo
				let {
					openId
				} = uni.getStorageSync('openId')
				let data = {
					id: this.orderInfo.id,
					openId: openId
				}
				this.$api.addDeliveryFinish(data).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						this.confirmSendFinishShow = false
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
					}

				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.my-gift-detail {
		padding-bottom: 40rpx;

		.nodata {
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #4E5969;
			text-shadow: #1D2129;
		}

		.goods-main-img {
			background: #ffffff;

			.main-img {
				margin-top: 40rpx;
				width: 650rpx;
				box-shadow: 4rpx 4rpx 10rpx #f7f8fa;
			}

			.goods-info {
				margin-top: 10rpx;
				padding: 32rpx;

				.title {
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					text-align: center;
					margin-top: 10rpx;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #FF3131;
					line-height: 50rpx;

					text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FF3131;
						line-height: 40rpx;
					}

				}
			}

			.padding-bar {
				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.receiving-information {
			// margin: 0 24rpx;
			margin-top: 24rpx;
			background: #ffffff;
			padding: 0 32rpx;
			padding-bottom: 24rpx;

			.item {
				// height: 104rpx;
				padding: 32rpx 0;

				.title1 {
					width: 180rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
				}

				.title2 {
					text-align: right;
					min-height: 40rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 40rpx;

				}
			}

			.btn-box {
				padding: 32rpx 0;

				// display: flex;
				// justify-content: center;
				// flex-direction: column;
				// border: none;

			}
		}

		.good-list {
			padding: 0 32rpx;
			margin-top: 24rpx;
			background: #ffffff;

			.right-item {
				width: 686rpx;
				margin: 0 auto;
				padding: 32rpx 0;
				border-bottom: 1rpx solid #E5E6EB;

				.t-top {
					display: flex;

					img {
						width: 160rpx;
						height: 160rpx;
						// vertical-align: middle;
						border-radius: 8rpx;
					}

					.t-info {
						margin-left: 24rpx;
						width: 502rpx;

						.t-title {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							color: #1D2129;
							line-height: 40rpx;
							width: 502rpx;
							overflow: hidden; //盒子超出隐藏
							text-overflow: ellipsis; //超出部分以省略号显示
							white-space: nowrap; //文本强制一行显示,也就是不
						}

						.t-money {
							display: flex;
							justify-content: space-between;
							line-height: 40rpx;
							margin-top: 16rpx;

							.t-money-lt {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 600;
								color: #FF7D00;
								line-height: 40rpx;

								text {
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #FF7D00;
									line-height: 34rpx;
								}
							}

							.t-money-rt {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #1D2129;
								line-height: 34rpx;
								position: relative;
								top: 6rpx;
							}
						}

					}
				}

			}
		}

		.btn-box1 {
			background: #ffffff;
			z-index: 999;
			width: 100%;
			border: none;
			margin-top: 24rpx;
			position: fixed;
			bottom: 0rpx;
			// bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
			// bottom: calc(env(safe-area-inset-bottom) + 0rpx);
			padding: 16rpx 30rpx 58rpx;
			box-sizing: border-box;

			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
		}

	}

	.my-gift-detail1 {
		padding-bottom: 170rpx;

	}

	.slot-content {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #4E5969;
		line-height: 44rpx;
		text-align: center;
	}
</style>